<template>
  <div>
    <Card :bordered="false">
      <div class="task">
        <!--测试环境开始-->
        <div class="conf-block basic-conf">
          <h4 class="conf-title">测试环境</h4>
          <hr class="split">
          <Row :gutter="50">
            <Col v-for="(project ,index) in testProject" :key="index" style="display: inline-flex">
              <Button type="primary" @click="handleSubmitDeploy(project)">
                {{project.name}}
              </Button>
            </Col>
          </Row>
        </div>
        <!--测试环境结束-->
        <!--预发布环境开始-->
        <div class="conf-block  remote-conf">
          <h4 class="conf-title">预发布环境</h4>
          <hr class="split">
          <Row :gutter="50">
            <Col v-for="(project ,index) in betaProject" :key="index" style="display: inline-flex">
              <Button type="warning" @click="handleSubmitDeploy(project)">
                {{project.name}}
              </Button>
            </Col>
          </Row>
        </div>
        <!--预发布环境结束-->
        <!--正式环境开始-->
        <div class="conf-block task-conf">
          <h4 class="conf-title">正式环境</h4>
          <hr class="split">
          <Row :gutter="50">
            <Col v-for="(project ,index)  in prodProject" :key="index" style="display: inline-flex">
              <Button type="success" @click="handleSubmitDeploy(project)">
                {{project.name}}
              </Button>
            </Col>
          </Row>
        </div>
        <!--正式环境结束-->
      </div>
    </Card>
    <div>
      <SubmitDeploy
        :showModal="showModal"
        :formData="formData"
        @changeVisible="changeVisible"
        @handleSubmit="handleSubmit"/>
    </div>
  </div>

</template>

<script>
  import './index.less'
  import {classificationProject} from '@/api/project'
  import SubmitDeploy from '@/view/task/component/submit'

  export default {
    name: 'task',
    mounted() {
      this.handleGetClassificationProject()
    },
    components: {
      SubmitDeploy
    },
    data() {
      return {
        testProject: [],
        betaProject: [],
        prodProject: [],
        modalVisible: false,
        modalLoading: false,
        showModal: false,
        formData: {}
      }
    },
    methods: {
      handleGetClassificationProject: function () {
        classificationProject().then(res => {
          this.testProject = res.data.test
          this.betaProject = res.data.beta
          this.prodProject = res.data.prod
        })
      },
      handleSubmitDeploy: function (project) {
        console.log(project)
        this.showModal = true
        this.formData = {
          id: project.id,
          name: project.name,
          level: project.env_name,
          repo_mode: project.repo_mode,
          branch: '',
          version: '',
        }
      },
      changeVisible: function (val) {
        this.showModal = val
      },
      handleSubmit: function (param) {
        console.log(param)
      },
    }
  }
</script>

